<template>
  <el-form-item :label="element.type != 'paragraph' ? element.label : ' '" :prop="element.name">
    <!--单行文本框-->
    <el-input
      placeholder="输入的内容..."
      v-if="element.type === 'text'"
      v-model="value"
      :style="styles"
      :disabled="disabled"
    />
    <!--多行文本框-->
    <el-input
      type="textarea"
      placeholder="输入的内容..."
      v-if="element.type === 'textarea'"
      :disabled="disabled"
      v-model="value"
      :style="styles"
    />
    <!--复选框-->
    <el-checkbox-group
      v-if="element.type === 'checkbox'"
      v-model="value"
      :disabled="disabled"
      :style="styles"
    >
      <el-checkbox :label="i.value" v-for="(i, key) in element.items" :key="key">{{
        i.label
      }}</el-checkbox>
    </el-checkbox-group>
    <!--单选框-->
    <el-radio-group
      v-if="element.type === 'radio'"
      v-model="value"
      :disabled="disabled"
      :style="styles"
    >
      <el-radio
        :label="i.label"
        :value="i.value"
        v-for="(i, key) in element.items"
        :key="key"
      ></el-radio>
    </el-radio-group>
    <!--下拉框-->
    <el-select
      v-if="element.type === 'select'"
      v-model="value"
      :disabled="disabled"
      :style="styles"
    >
      <el-option :value="i.value" v-for="(i, key) in element.items" :key="key" :label="i.label"></el-option>
    </el-select>
    <!--日期选择框-->
    <el-date-picker
      type="date"
      v-if="element.type === 'datepicker'"
      placeholder="选择日期"
      v-model="value"
      :style="styles"
      :disabled="disabled"
    />
    <!--日期范围选择框-->
    <el-date-picker
      v-if="element.type === 'daterangepicker'"
      v-model="value"
      type="daterange"
      range-separator="到"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :style="styles"
      :disabled="disabled"
    />
    <!--评分-->
    <el-rate v-if="element.type === 'rate'" v-model="value" :disabled="disabled" :style="styles" />
    <!--数字输入框-->
    <el-input-number
      placeholder="输入的内容..."
      v-model="value"
      :disabled="disabled"
      :style="styles"
      v-if="element.type === 'number'"
    />
    <!--金额输入框-->
    <el-input
      type="number"
      v-if="element.type === 'money'"
      v-model="value"
      :style="styles"
      :active-change="false"
      :disabled="disabled"
    />
    <!--开关选择器-->
    <el-switch
      v-model="value"
      :style="styles"
      :disabled="disabled"
      v-if="element.type === 'switch'"
    />
    <!--文本-->
    <p v-if="element.type === 'paragraph'" :style="styles">{{ element.label }}</p>
    <!--图片上传-->
    <el-upload
      :style="styles"
      v-if="element.type == 'uploadImages'"
      :disabled="disabled"
      class="avatar-uploader"
      :show-file-list="false"
    >
      <img v-if="value && value.length > 0" :src="value" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </el-upload>
  </el-form-item>
</template>
<script setup lang="ts">
import { defineProps, defineModel, computed, type PropType } from 'vue';
import { propTypes } from '@/utils/propTypes';
import { Plus } from '@element-plus/icons-vue';
import type { WorkflowInput, WorkFormComponentsStyle } from '@/utils/api/workflow/definition/type';

// 动态绑定值
//const value = defineModel<string | string[]>();
const value = defineModel<any>(propTypes.any);

// props参数
const props = defineProps({
  element: {
    type: Object as PropType<WorkflowInput>,
    required: true,
    validator: (val: any[]) => val.length > 0
  },
  disabled: propTypes.bool.def(false)
});

// 样式属性
const styles = computed(() => {
  let style: Record<string, string> = {};
  if (props.element.styles) {
    props.element.styles.forEach((e: WorkFormComponentsStyle) => {
      style[e.name] = e.value;
    });
  }
  return style;
});

// 渲染
// const styles = () => {
//   let style: Record<string, string> = {};
//   if (props.element.styles) {
//     props.element.styles.forEach((e: WorkFormComponentsStyle) => {
//       style[e.name] = e.value;
//     });
//   }
//   return style;
// };
</script>
